<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <link href="./css/public.css" rel="stylesheet">
    <link href="./font/iconfont.css" rel="stylesheet">
    <link href="./css/index.css" rel="stylesheet">
    <title>打车-首页</title>
</head>

<body>
    <!-- main：html5的语义化标签之一，实际上就是div，只是变了一个元素名 -->
    <main id="container">
        <header class="header">
            <div class="header-top">
                <span class="iconfont icon-icon-person-renwu left">
                </span>
                <span class="iconfont icon-fenxiang right"></span>
                <h2 class="title">飞的出行</h2>
            </div>
            <div class="header-bottom">
                您有<span class="blue">2</span>笔未支付的订单，点击查看<span class="iconfont icon-youjiantou"></span>
            </div>
        </header>
        <footer class="footer">
            <nav class="nav">
                <a class="active">立即</a>
                <a>预约</a>
                <a>接机</a>
                <a>送机</a>
                <a>包车</a>
            </nav>
            <div class="address-box">
                <div class="address-row">
                    <span class="span1"></span>
                    <p>天府软件园</p>
                </div>
                <div class="address-row">
                    <span class="span2"></span>
                    <p class="p2">您要去哪儿</p>
                </div>
            </div>
        </footer>
    </main>
</body>
<!-- 新的语法规范推荐，js写在html文件的末尾位置，可以提高运行效率 -->
<script type="text/javascript">
    window._AMapSecurityConfig = {
        // 设置密钥
        securityJsCode: 'b5d5353863a0c66ae610f567a7a10c0c',
    }
</script>
</script>
<!-- 通过key引入地图的js -->
<script src='https://webapi.amap.com/maps?v=2.0&key=cdaf95bc9e68374e25a78f884c8bde4d'></script>
<script src="./js/index.js"></script>
</html>